<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'/>
    <title>访问Geoserver发布的地图</title>
    <script type='text/javascript' src='js/jquery-1.10.2.js'></script>
    <script type='text/javascript' src='js/layer.js'></script>
    <script type='text/javascript' src='lib/OpenLayers.js'></script>

    <style>
        * {
            padding: 0;
            margin: 0;
            border: 0
        }

        html, body {
            height: 100%;
        }

        #tooler {
            width: 60%;
            /*background-color: rgba(64,73,85,0.5);*/
            background-image: url('img/gisimg/Toolbg_GIS.png');
            color: #fff;
            margin: auto;
            left: 0;
            right: 0;
            bottom: 0;
            position: fixed;
            z-index: 999;
        }

        #tooler ul li {
            float: left;
            list-style: none;
            width: 14.2%;
            text-align: center;
            height: 60px;
            line-height:60px;
            cursor: pointer;
        }

        #video {
            background-color: #000;
            width: 300px;
            height: 300px;
            position: fixed;
            left: 0px;
            bottom: 0px;
            z-index: 999;
            display: none;
        }
        
        .select{
            background-color: #7093f2;
        }

        .search>div{
            float: left;
            /*margin: 5px;
            border: solid 1px #233E5E;*/
        }

        #carmera-tip{
            line-height:25px;
        }


        /*.select_box {width:100px; position:relative; padding:0; font-size:12px;}*/
        .select_box {
            width: 127px;
            height: 36px;
            position: relative;
            padding: 0;
            font-size: 14px;
            margin-top: 2px;
            margin-left: 45px;
            outline: 0;
        }
        .select_box ul,li {list-style-type:none; padding:0; margin:0}
        .select_box input {
            cursor:pointer;
            display:block;
            line-height:25px;
            width:100%;
            height:36px;
            overflow:hidden;
            background:url('img/gisimg/select_input_bg.gif') no-repeat 110px center;
            font-size:14px;
            outline: 0;
         }
        .select_box ul {width:170px; position:absolute; left:-45px; top:38px; border:1px solid #ccc; background:#fff; overflow: hidden;display:none; background:#ebebeb; z-index:99999;}
        .select_box ul li {
            display:block;
            height:30px;
            overflow:hidden;
            line-height:30px;
            padding-left:20px;
            width:100%;
            cursor:pointer;
        }
        .hover {background:#ccc;}

        input{font-size: 16px}
        input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow:0 0 0 1000px #fff inset;-webkit-text-fill-color:#000;}
        input[type=text]:focus,input[type=password]:focus, textarea:focus {-webkit-box-shadow: 0 0 0 1000px #fff  inset;-webkit-text-fill-color:#000;}

        #showRoad ul li{
            float: left;
            padding: 5px 10px;
            margin: 5px;
            background-color: #D8DDE9;
            cursor: pointer;
        }

        #layer{
            display: none;
            background-color: rgba(62, 131, 163, 0.95);
            width: 148px;
            position: absolute;
            top: 40px;
            left: 0px;
            z-index: 999;
            border:1px solid #000;
            font-weight: bold;
            font-family: "微软雅黑";
        }

        #layer label{
            display: block;
            padding: 10px;
        }

        #searchdata {
            position: fixed;
            display: none;
            right: 83px;
            top: 111px;
            z-index: 800;
            width: 324px;
            height: 160px;
            background-color: rgba(62, 131, 163,0.9);
            border:1px solid #000;
            overflow: auto;
            font-weight: bold;


        }
        ::-webkit-scrollbar{width:5px;}
        ::-webkit-scrollbar-track{background-color:#bee1eb;}
        ::-webkit-scrollbar-thumb{background-color:#00aff0;}
        /*::-webkit-scrollbar-thumb:hover {background-color:#9c3}
        ::-webkit-scrollbar-thumb:active {background-color:#00aff0}*/

        #searchdata table tr td{
            padding: 2px 10px;
            cursor: pointer;
        }
        #searchdata table tr td:hover{
            color: #ccccff;
        }

        .olControlLTOverviewMapContainer {
            position: absolute;
            bottom: 0px;
            right: 0px;
            background-color: #FFFFFF;
        }
        .olControlLTOverviewMapElement {
            border-left:1px solid #999999 !important;
            border-top:1px solid #999999 !important;
            /*---------原来----------*/
            /*padding-top: 5px !important;
            padding-left: 5px !important;*/
            /*---------原来end----------*/
            padding: 5px !important;
            /*border:1px solid #000000 !important;

            padding: 4px 4px 4px 4px !important;
            padding: 1px 1px 1px 1px;
            background-color: #ffffff !important;
            background-color: #ffffff;
            -moz-border-radius: 1em 0 0 0;
            border:1px solid #000000;*/

        }

        .olControlLTOverviewMapMinimizeButton {
            right: 5px;
            bottom: 5px !important;
        }

        .olControlLTOverviewMapMaximizeButton {
            right: 0px;
            bottom: 0px !important;
            bottom: 0px;
        }

        .olControlLTOverviewMapExtentRectangle {
            overflow: hidden;
            background-image: url("rect.gif");
            background-repeat: no-repeat;
            background-position: center;
            cursor: move;
            border: 2px ridge  blue !important;
            border: 2px ridge  blue;
            background:#D8DDE9;/*background:#69F;*/
            filter:alpha(opacity=50);/* IE */
            -moz-opacity:0.5;/* Moz + FF */
            opacity: 0.5; /* 支持CSS3的浏览器（FF 1.5也支持）*/
        }
        .olControlLTOverviewMapRectReplacement {
            overflow: hidden;
            cursor: move;
            background-image: url("overview_replacement.gif");
            background-repeat: no-repeat;
            background-position: center;

        }
        .olMap {
            z-index: 0;
            padding: 0 !important;
            margin: 0 !important;
            cursor: default;
            border:1px solid #999999;
        }

        div.olControlZoom{display: none; }
    </style>
    <script type='text/javascript'>
        function coordinate(lon,lat){
            var point=[];
            point['lon']=lon-121.47756;
            point['lat']=lat-31.239149;
            return point;
        }
        function coordinatestr(coordinate){
            var arr=coordinate.split(',');
            var point=[];
            point['lon']=arr[0]-121.47756;
            point['lat']=arr[1]-31.239149;
            return point;
        }
        var map, markers,overview,cameraMarkers,measureControls, messagelast, measurePopup;

        const data1=[
            {name: "C0001", roadname: "前滩大道/华夏路", coordinate: "121.475536,31.155203",id:1},
            {name: "C0002", roadname: "前滩大道/华夏路", coordinate: "121.475918,31.15426",id:1},
            {name: "C0003", roadname: "前滩大道/华夏路", coordinate: "121.476632,31.155547",id:2},
            {name: "C0004", roadname: "桐晚路/华夏西路", coordinate: "121.477076,31.153202",id:1},
            {name: "C0005", roadname: "桐晚路/华夏西路", coordinate: "121.477395,31.152584",id:3},
            {name: "C0006", roadname: "桐晚路/华夏西路", coordinate: "121.477508,31.152024",id:1},
            {name: "C0007", roadname: "杨思西路/华夏路", coordinate: "121.487703,31.15494",id:1},
            {name: "C0008", roadname: "杨思西路/华夏路", coordinate: "121.492311,31.154229",id:2},
            {name: "C0009", roadname: "杨思西路/华夏路", coordinate: "121.493039,31.160688",id:2},
            {name: "C0010", roadname: "东育路/高青西路", coordinate: "121.490223,31.155558",id:2},
            {name: "C0011", roadname: "东育路/高青西路", coordinate: "121.490223,31.155558",id:1},
            {name: "C0012", roadname: "东育路/高青西路", coordinate: "121.490905,31.1545",id:3},
            {name: "C0013", roadname: "海阳西路/东育路", coordinate: "121.491826,31.156535",id:1},
            {name: "C0014", roadname: "海阳西路/东育路", coordinate: "121.489167,31.15866",id:2},
            {name: "C0015", roadname: "海阳西路/东育路", coordinate: "121.490088,31.157296",id:1}
        ];

        var data2=[
            {name: "C0001", roadname: "前滩大道/华夏路", coordinate: "121.475536,31.155203"},
            {name: "C0002", roadname: "前滩大道/华夏路", coordinate: "121.475918,31.15426"},
            {name: "C0003", roadname: "前滩大道/华夏路", coordinate: "121.476632,31.155547"}
        ];

        //const data1=parent.pkdb.select("select id,name,roadname,coordinate from t_video_psp where roadname!=''").obj.rows;

        var data=data1;

        function init() {
            //定义地图边界  
            //var bounds= new OpenLayers.Bounds(120.86059570312354,30.675715404167388,122.01416015624855,31.877557643339664);
            //var bounds = new OpenLayers.Bounds(-0.3992482097651525,-0.4091585887536387,0.2530600637301434,0.167704476550085);
            var options = {
                projection: "EPSG:4326",
                center: new OpenLayers.LonLat(coordinate(121.475172,31.155172).lon,coordinate(121.475172,31.155172).lat),
            };
            map = new OpenLayers.Map('map', options);
            var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",
                //geoserver所在服务器地址  
                "http://127.0.0.1:8080/geoserver/map/wms",
                {
                    //layers: "map:sh"
                    layers: "map:qt"
                },
                //图片大小
                //new OpenLayers.Size(1024, 768),
                {numZoomLevels: 19}
            );
            //添加wms图层  
            map.addLayer(wms);

            //添加鹰眼图
            //map.addControl(new OpenLayers.Control.OverviewMap());

            var sketchSymbolizers = {
                "Point": {
                    pointRadius: 4,
                    graphicName: "square",
                    fillColor: "white",
                    fillOpacity: 1,
                    strokeWidth: 1,
                    strokeOpacity: 1,
                    strokeColor: "#333333"
                },
                "Line": {
                    strokeWidth: 3,
                    strokeOpacity: 1,
                    strokeColor: "#f00",
                    strokeDashstyle: "dash"
                },
                "Polygon": {
                    strokeWidth: 2,
                    strokeOpacity: 1,
                    strokeColor: "#f00",
                    fillColor: "white",
                    fillOpacity: 0.3
                }
            };
            var style = new OpenLayers.Style();
            style.addRules([
                new OpenLayers.Rule({symbolizer: sketchSymbolizers})
            ]);
            var styleMap = new OpenLayers.StyleMap({"default": style});
            var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
            renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
            measureControls = {
                line: new OpenLayers.Control.Measure(
                    OpenLayers.Handler.Path, {
                        persist: true,
                        handlerOptions: {
                            layerOptions: {
                                renderers: renderer,
                                styleMap: styleMap
                            }
                        }
                    }
                ),
                polygon: new OpenLayers.Control.Measure(
                    OpenLayers.Handler.Polygon, {
                        persist: true,
                        handlerOptions: {
                            layerOptions: {
                                renderers: renderer,
                                styleMap: styleMap
                            }
                        }
                    }
                )
            };

            for (var key in measureControls) {
                control = measureControls[key];
                control.events.on({
                    'measure': measureDistance,
                    'measurepartial': measurepartial
                });
                map.addControl(control);
            }

            //添加control空间
            //初始级别
            map.setCenter(new OpenLayers.LonLat(coordinate(coordinate(121.475172,31.155172).lon,coordinate(121.475172,31.155172).lat)), 17);
            //导航
            //map.addControl(new OpenLayers.Control.Navigation());
            //selectFeature(box)控件
            //map.addControl(new OpenLayers.Control.SelectFeature(boxes));
            //sf.activate();
            //导航历史控件
            //map.addControl(new OpenLayers.Control.NavigationHistory());
            //navtoolbar工具
            //map.addControl(new OpenLayers.Control.NavToolbar());
            //图层
            //map.addControl(new OpenLayers.Control.LayerSwitcher());
            //右下方显示鼠标悬浮坐标
            //map.addControl(new OpenLayers.Control.MousePosition());
            //左下方比例
            //map.addControl(new OpenLayers.Control.ScaleLine());
            //右下角比例
            //map.addControl(new OpenLayers.Control.Scale);

            //map.zoomToMaxExtent(bounds);
            //map.addControl(new OpenLayers.Control.LTOverviewMap());

            /*//定义图标大小
            var size = new OpenLayers.Size(44, 40);
            //定义图标偏移
            var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
            //定义图标
            var icon = new OpenLayers.Icon('img/marker.png', size, offset);
            //创建地标
            var marker = new OpenLayers.Marker(new OpenLayers.LonLat(121.52784, 31.37936), icon);

            //将创建的地标添加到地标图层
            markers.addMarker(marker);*/
            showMarker();
        }

        function showvideo(key){
            $("#video").css("display", "block");
            $("#iframe").attr('src','http://192.168.10.108/run?path=100225&id='+key);
        }

        function closevideo(){
            $("#video").css("display", "none");
            $("#iframe").attr('src','javascript:void(0)');
        }

        function addMarker(markerName,icon,ll, popupClass, popupContentHTML, closeBox, overflow , parm) {

            var feature = new OpenLayers.Feature(markerName,ll,{icon:icon.clone()});
            feature.closeBox = closeBox;
            feature.popupClass = popupClass;
            feature.data.popupContentHTML = popupContentHTML;
            feature.data.overflow = (overflow) ? "auto" : "hidden";

            var marker = feature.createMarker();

            var mouseOver = function (evt) {
                if (this.popup == null) {
                    this.popup = this.createPopup();
                    //this.popup.setColor("#fff");
                    this.popup.setBackgroundColor("#000");//E2E7EB
                    this.popup.setBorder("1px #0066ff solid");
                    this.popup.setSize(new OpenLayers.Size(200,150));
                    this.popup.setOpacity(0.8);
                    map.addPopup(this.popup);
                    this.popup.show();
                }else{
                    this.popup.toggle();
                }
                currentPopup = this.popup;
                OpenLayers.Event.stop(evt);
            };
            var markerOut = function (evt) {
                if (this.popup != null) {
                    this.popup.toggle();
                }
                currentPopup = this.popup;
                OpenLayers.Event.stop(evt);
            };
            var mouseClick = function (evt) {
                $("#video").css("display", "block");
                showvideo(parm);
            };
            marker.events.register("mouseover", feature, mouseOver);
            marker.events.register("mouseout", feature, markerOut);
            marker.events.register("click", feature, mouseClick);
            markerName.addMarker(marker);
        }

        function createPopupContentHTML(data){
            return '<table id="carmera-tip" style="color: #fff;"><tr><td>id：</td><td>'+data.id+'</td></tr><tr><td>摄像机：</td><td>'+data.name+'</td></tr><tr><td>道路名：</td><td>'+data.roadname+'</td></tr><tr><td>横坐标：</td><td>'+data.coordinate.split(',')[0]+'</td></tr><tr><td>纵坐标：</td><td>'+data.coordinate.split(',')[1]+'</td></tr></table>'
        }

        function cameraMarker(){
            cameraMarkers = new OpenLayers.Layer.Markers("Markers");
            map.addLayer(cameraMarkers);
            for(var i=0;i<data.length;i++){
                var url = 'img/gisimg/OnlineState.png';
                var sz = new OpenLayers.Size(20, 20);  //尺寸大小
                var calculateOffset = function(size) {
                    return new OpenLayers.Pixel(-(size.w/2), -size.h);
                };

                var icon = new OpenLayers.Icon(url, sz, null, calculateOffset);
                var lonLat,popupContentHTML,popupClass,param;
                if(data == null){
                    return;
                }
                //遍历显示
                for(var i=0;i<data.length;i++){
                    lonLat = new OpenLayers.LonLat(coordinatestr(data[i].coordinate).lon,coordinatestr(data[i].coordinate).lat);
                    //google地图需要转换坐标
                    lonLat.transform(map.displayProjection, map.getProjectionObject());
                    popupContentHTML = createPopupContentHTML(data[i]);
                    popupClass = OpenLayers.Popup.Anchored;
                    param=data[i].id;
                    addMarker(cameraMarkers,icon,lonLat, popupClass, popupContentHTML,true,false,param);
                }
            }
        }

        //缩小
        function zoomOut(){
            map.zoomOut();
        }
        //放大
        function zoomIn(){
            map.zoomIn();
        }

        //测距、面积
        function measureDistance(event) {
            messagelast = parseFloat(event.measure).toFixed(2) + "" + event.units;
            if (event.order > 1) {
                messagelast += "<sup>2</" + "sup>";
            }
            //获取鼠标点击处的经纬度
            var points = event.geometry.components;
            var point = points[points.length - 1];
            if (measurePopup != null)
                map.removePopup(measurePopup);
            if (event.order == 1) {
                x=point.x;
                y=point.y;
            } else {
                x=point.components[point.components.length-2].x
                y=point.components[point.components.length-2].y
            }
            measurePopup = new OpenLayers.Popup("chicken",
                //弹出框位置
                new OpenLayers.LonLat(x, y),
                //new OpenLayers.LonLat(position.x, position.y),
                null,
                messagelast,
                true,
                closeBoxCallback
            );
            measurePopup.autoSize = true;
            measurePopup.backgroundColor = "#06a09f";
            measurePopup.opacity = 0.8;
            map.addPopup(measurePopup);
        }

        function measurepartial(event) {
            var message = parseFloat(event.measure).toFixed(2) + "" + event.units;
            var points = event.geometry.components;
            var point = points[points.length - 1];
            if (measurePopup != null)
                map.removePopup(measurePopup);
            measurePopup = new OpenLayers.Popup("chicken",
                //弹出框位置
                new OpenLayers.LonLat(point.x, point.y),
                null,
                message,
                true,
                closeBoxCallback
            );
            measurePopup.autoSize = true;
            measurePopup.backgroundColor = "#06a09f";
            measurePopup.opacity = 0.8;
            if (points.length > 2)
                map.addPopup(measurePopup);
        }

        function closeBoxCallback() {
            toggleControl('none')
        }

        function toggleControl(_value) {
            for (key in measureControls) {
                var control = measureControls[key];
                if (_value == key) {
                    control.activate();
                } else {
                    if (measurePopup != null)
                        map.removePopup(measurePopup);
                    control.deactivate();
                }
            }
        }

        function showOverview(){
            if(overview==null){
                overview=new OpenLayers.Control.LTOverviewMap();
                map.addControl(overview);
            }else{
                map.removeControl(overview);
                overview=null;
            }
        }

        function showMarker() {
            if($("#camera").is(':checked')) {
                cameraMarker();
            }else{
                map.removeLayer(cameraMarkers);
            }
        }

        function searchdata(){
            var cameraname=$("#cameraname").val();
            var newdata=parent.pkdb.select("select id,name,roadname,coordinate from t_video_psp where roadname!='' and name like'%"+cameraname+"%'").obj.rows;
            //var newdata=data2;
            $("#searchdata").css("display","block");
            $("#searchdata table").empty();
            for(var i=0;i<newdata.length;i++){
                $("#searchdata table").append('<tr><td onclick="setCenter('+newdata[i].coordinate+')">'+newdata[i].name+'</td></tr>')
            }
        }

        function search(){
            var roadname=$("#roadname").val();
            if(roadname=='全部'){
                //data=parent.pkdb.select("select name,roadname,coordinate from t_video_psp where roadname!=''").obj.rows;
                data=data1;
                map.removeLayer(cameraMarkers);
                showMarker();
            }else{
                var newdata=parent.pkdb.select("select id,name,roadname,coordinate from t_video_psp where roadname='"+roadname+"'").obj.rows;
                //var newdata=data2;
                if(newdata.length!=0){
                    data=newdata;
                    map.removeLayer(cameraMarkers);
                    showMarker();
                }
            }
        }

        function showLayer(){
            var flag=$("#layer").css("display");
            if(flag=='none'){
                flag='block';
            }else{
                flag='none';
            }
            $("#layer").css("display",flag);
        }

        function showRoad(){
            tr();
            layer.open({
                type: 1,
                area: ['400px', '300px'],
                title: ['巡逻路线', 'font-size:18px;margin-left:30px;text-align:center'],
                //btn: ["保存", "取消"],
                yes: function(index, layero){
                    layer.close(index);
                },
                content: $("#showRoad")//所要弹出的页面
            });
        }

        function addRoad(){
            $("#roadlist").empty();
            layer.closeAll();
            showCamera();
            layer.open({
                type: 1,
                area: ['400px', '300px'],
                title: ['添加摄像头', 'font-size:18px;margin-left:30px;text-align:center'],
                btn: ["保存"],
                yes: function(index, layero){
                    layer.close(index);
                    var lines='';
                    for(var i=0;i<cameratrs.length;i++){
                        lines+=cameratrs[i].innerText;
                        if(i<cameratrs.length-1) lines+=',';
                    }
                    parent.pkdb.insert("insert into t_video_line(name,camera_id) values('"+$("#linename").val()+"','"+lines+"')");
                    $("#tcamera").empty();
                },
                content: $("#addRoad")//所要弹出的页面
            })
        }

        function delRoad(){
            if($("#roadlist tr.select").text()!=''){
                parent.pkdb.delete("delete from t_video_line where name='"+$("#roadlist tr.select").text()+"'");
                $("tr.select").remove();
            }else{
                layer.msg('未选中一行数据');
            }
            //layer.closeAll();
        }

        function startRoad(){
            if($("#roadlist tr.select").text()!=''){
                var cameraId=parent.pkdb.select("select camera_id from t_video_line where name='"+$("#roadlist tr.select").text()+"'").obj.rows;
                var newdata=parent.pkdb.select("select id,name,roadname,coordinate from t_video_psp where id in ("+cameraId[0].camera_id+")").obj.rows;
                //var newdata=data2;
                if(newdata.length!=0){
                    data=newdata;
                    map.removeLayer(cameraMarkers);
                    showMarker();
                    const SLEEP_MILLISECONDS = 1000 * 10;
                    for (var j = 0; j < data.length; j++) {
                        var record = data[j];
                        (function(record) {
                            setTimeout(function() {
                                var lonlat=record.coordinate.split(',');
                                setCenter(lonlat[0],lonlat[1]);
                            }, j * SLEEP_MILLISECONDS);
                        })(record);
                    }
                   /* for(var i = 0 ; i < data.length ; i++){
                        setTimeout(function(){
                            var lonlat=data[i].coordinate;
                            alert(lonlat)
                            setCenter(lonlat);
                        },i*3000);
                    }*/
                }
                layer.closeAll();
            }else{
                layer.msg('未选中一行数据');
            }
        }
        var cameratrs,roadtrs;
        function addCamera(){
            $("#tcamera").append("<tr><td>"+$("#cameralist").val()+"</td></tr>");
            cameratrs = document.getElementById('tcamera').getElementsByTagName('tr');
            for( var i=0; i<cameratrs.length; i++ ){
                cameratrs[i].onmousedown = function(){
                    cameratronmousedown(this);
                }
            }
        }

        function delCamera(){
            if($("#tcamera tr.select").text()!=''){
                $("#tcamera tr.select").remove();
            }else{
                layer.msg('未选中一行数据');
            }
        }

        function showCamera(){
            $("#cameralist").empty();
            var cameragroup=$("#cameragroup").val();
            var cameradata=parent.pkdb.select("select id,name,roadname,coordinate from t_video_psp where roadname='"+cameragroup+"'").obj.rows;
            for(var i=0;i<cameradata.length;i++){
                $("#cameralist").append("<option value="+cameradata[i].id+">"+cameradata[i].name+"</option>")
            }
            //$("#cameralist").css("display","block");
        }

        function tr(){
            $("#roadlist").empty();
            var roadList=parent.pkdb.select("select camera_id,id,name from t_video_line").obj.rows;
            for(var i=0;i<roadList.length;i++){
                $("#roadlist").append("<tr><td>"+roadList[i].name+"</td></tr>");
            }
            roadtrs = document.getElementById('roadlist').getElementsByTagName('tr');
            for( var i=0; i<roadtrs.length; i++ ){
                roadtrs[i].onmousedown = function(){
                    roadtronmousedown(this);
                }
            }
        }

        function roadtronmousedown(obj){
            for( var o=0; o<roadtrs.length; o++ ){
                if( roadtrs[o] == obj ){
                    roadtrs[o].className='select';
                }
                else{
                    roadtrs[o].className='';
                }
            }
        }

        function cameratronmousedown(obj){
            for( var o=0; o<cameratrs.length; o++ ){
                if( cameratrs[o] == obj ){
                    cameratrs[o].className='select';
                }
                else{
                    cameratrs[o].className='';
                }
            }
        }

        function setCenter(lon,lat){
            var lonlat=coordinate(lon,lat);
            map.setCenter(new OpenLayers.LonLat(lonlat.lon,lonlat.lat), 17);
        }

        function unique5(array){
            var r = [];
            for(var i = 0, l = array.length; i < l; i++) {
                for(var j = i + 1; j < l; j++)
                    if (array[i] === array[j]) j = ++i;
                r.push(array[i]);
            }
            return r;
        }

        $(function(){
            $(".select_box input").click(function(){
                var thisinput=$(this);
                var thisul=$(this).parent().find("ul");
                if(thisul.css("display")=="none"){
                    if(thisul.height()>200){thisul.css({height:"200"+"px","overflow-y":"scroll" })};
                    thisul.fadeIn("100");
                    thisul.hover(function(){},function(){thisul.fadeOut("100");})
                    thisul.find("li").click(function(){thisinput.val($(this).text());thisul.fadeOut("100");}).hover(function(){$(this).addClass("hover");},function(){$(this).removeClass("hover");});
                }else{
                    thisul.fadeOut("fast");
                }
            })
            var roadname=[];
            for(var i=0;i<data1.length;i++){
                roadname[i]=data1[i].roadname;
            }
            var rname=unique5(roadname);
            for(var i=0;i<rname.length;i++){
                $(".select_ul").append("<li>"+rname[i]+"</li>");
                $("#cameragroup").append("<option value='"+rname[i]+"'>"+rname[i]+"</option>");
            }
        })

    </script>

</head>

<body onload='init();'>
<div id="video">
    <div style="position: absolute;top:2px;right: 2px;color: #ffffff" onclick="closevideo()">X</div>
    <iframe id="iframe" height="100%">
    </iframe>
</div>

<div id="tooler">
    <ul>
        <li onclick="zoomIn()"><img src="img/gisimg/ZoomUp_GIS.png"></li>
        <li onclick="zoomOut()"><img src="img/gisimg/ZoomDown_GIS.png"></li>
        <li onclick="toggleControl('none')"><img src="img/gisimg/Move_GIS.png"></li>
        <li onclick="toggleControl('line')"><img src="img/gisimg/MeasureDistance_GIS.png"></li>
        <li onclick="toggleControl('polygon')"><img src="img/gisimg/MeasureArea_GIS.png"></li>
        <li onclick=""><img src="img/gisimg/FullImg_GIS.png"></li>
        <li onclick="showOverview()"><img src="img/gisimg/EaglEye_GIS.png"></li>
    </ul>
</div>
<div class="search" style="position: fixed;right: 10px;top: 20px;z-index: 888;">
    <div style="background: url('img/gisimg/RoadNameBg.png') no-repeat; width: 400px;margin-bottom: 10px;">
        <div style="width: 178px;float: left;">
            <div class="select_box">
                <input id="roadname" type="text" readonly="readonly">
                <ul class="select_ul" onclick="search()">
                    <li>全部</li>
                    <!--<li>前滩大道/华夏路</li>
                    <li>桐晚路/华夏西路</li>
                    <li>杨思西路/华夏路</li>
                    <li>东育路/高青西路</li>
                    <li>海阳西路/东育路</li>-->
                </ul>
            </div>

        </div>
        <div onclick="showLayer()" style="position: relative;width: 150px;height: 40px;margin-right: 10px;background: url(img/gisimg/text.png) 65px no-repeat;float: left;">
            <div id ="layer" >
                <label><input type="checkbox" id="crowdDensity" value="人流密度">人流密度</label>
                <label><input type="checkbox" id="camera" checked="checked"  onclick="showMarker()" value="摄像头">摄像头</label>
                <label><input type="checkbox" value="NVR">NVR</label>
            </div>
        </div>
        <div onclick="showRoad()" style="width: 40px;height: 40px;background:url('img/gisimg/setBtn.png') center no-repeat;float: left;"></div>
        <div style="clear: both"></div>
    </div>
    <p><!---->
        <label>
            <input type="text" onfocus="this.value=''" onblur="if(this.value==''){this.value='摄像机设备名'}" style="width: 304px;height:20px;border: solid 2px #233E5E;padding: 8px 10px;" name="cameraname" id="cameraname" value="摄像机设备名">
            <button  onclick="searchdata()" style="width: 57px;height:38px;margin-left:3px;padding: 13px 0;background: url(img/gisimg/SearchBtn.PNG) center no-repeat;"></button>
        </label>
    </p>
</div>
<div id="searchdata">
    <table>
    </table>
</div>
<div style="position: fixed;width: 31px;height: 107px;right: 10px;bottom: 210px;z-index:999;background: url('img/gisimg/StateSampleArea.png')">
</div>
<div style="position: fixed;width: 31px;height: 65px;right: 10px;bottom: 140px;z-index:999;">
    <img onclick="zoomIn()" src="img/gisimg/Magnify.png">
    <img onclick="zoomOut()" src="img/gisimg/narrow.png">
</div>
<div id="showRoad" style="display: none;">
        <div style="height: 200px;width: calc(100% - 2px);overflow-y: scroll;border:1px solid #7093f2">
            <table id="roadlist" >
            </table>
        </div>
        <ul>
            <li onclick="addRoad()">添加</li>
            <li onclick="delRoad()">删除</li>
            <li onclick="startRoad()">查看</li>
        </ul>
</div>
<style>
    #addRoad label{
        display: block;
    }
    #addRoad ul{
        margin-left: 295px;
        margin-top: -26px;
    }
    #addRoad ul li{
        float: left;
        width: 32px;
        padding:5px;
        margin-right: 5px;
        background: #ccc;
    }
</style>
<div id="addRoad" style="display: none;">
    <label>
        线路名称：<input type="text" id="linename">
    </label>
    <label>
        选择摄像机：
        <select id="cameragroup" onchange="showCamera()">
            <!--<option value="前滩大道/华夏路">前滩大道/华夏路</option>
            <option value="桐晚路/华夏西路">桐晚路/华夏西路</option>
            <option value="杨思西路/华夏路">杨思西路/华夏路</option>
            <option value="东育路/高青西路">东育路/高青西路</option>
            <option value="海阳西路/东育路">海阳西路/东育路</option>-->
        </select>
        <select id="cameralist">

        </select>
        <ul>
            <li value="添加" onclick="addCamera()">添加</li>
            <li value="删除" onclick="delCamera()">删除</li>
        </ul>
        <div style="width: calc(100% - 2px);height: 155px;overflow-y: scroll;border: 1px solid #7093f2">
            <table id="tcamera">
            </table>
        </div>
    </label>
</div>
<div id='map' style='width:calc(100% - 2px);height:calc(100% - 2px);'>
</div>
</body>
</html>  